<template>
    <div style="width: 100%">
        <!--  头部搜索和创建按钮区域-->
        <el-row :gutter="50">
            <!--    搜索区域列-->
            <el-col :span="7">
                <el-input
                    clearable
                    @clear="getclassesData"
                    @focus="setPageNum"
                    @input="getclassesData"
                    placeholder="请输入班级名称"
                    v-model="className"
                    prefix-icon="el-icon-search"
                />
            </el-col>
            <!--    按钮区域列-->
            <el-col :span="4">
                <el-row>
                    <el-tooltip
                        effect="dark"
                        content="创建班级(作为学生的容器)"
                        v-if = "!isDisable"
                        placement="top"
                    >
                        <el-button
                            type="primary"
                            icon="el-icon-plus"
                            :disabled="isDisable"
                            circle
                            @click="addDialogVisible = true"
                        />
                    </el-tooltip>
                </el-row>
            </el-col>
        </el-row>
        <!--  表格数据区域-->
        <el-table
            :data="tableData"
            border
            highlight-current-row
            stripe
            style="width: 100%"
            :row-style="rowStyle"
            :cell-style="cellStyle"
        >
            <el-table-column
                :key="table.prop"
                v-for="table in tableHeader"
                :label="table.label"
                :prop="table.prop"
                align="center"
                :width="table.width"
            />
            <el-table-column
                label="操作"
                align="center"
                width="200px"
            >
                <!--        操作按钮区域的作用域插槽-->
                <template slot-scope="scope">
                    <el-tooltip
                        effect="dark"
                        content="班级学生(可查看本班级所有学生)"
                        placement="top"
                    >
                        <el-button
                            type="info"
                            icon="el-icon-view"
                            circle
                            @click="toStudentDataShowClasses(scope.row.className)"
                        />
                    </el-tooltip>
                    <el-tooltip
                        effect="dark"
                        content="编辑班级(可编辑班级名称)"
                        v-if = "!isDisable"
                        placement="top"
                    >
                        <el-button
                            type="primary"
                            icon="el-icon-edit"
                            :disabled="isDisable"
                            circle
                            @click="editDialogVisible1(scope.row)"
                        />
                    </el-tooltip>
                    <el-tooltip
                        effect="dark"
                        content="删除班级(不会删除学生及专业)"
                        v-if = "!isDisable"
                        placement="top"
                    >
                        <el-button
                            type="danger"
                            icon="el-icon-delete"
                            :disabled="isDisable"
                            circle
                            @click="deleteDialogVisible1(scope.row.classId)"
                        />
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!--    分页器区域-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[10, 20, 35, 50]"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            background
        />
        <!--    添加班级对话框区域-->
        <el-dialog
            title="添加班级"
            :visible.sync="addDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >
            <!--      对话框主体区域-->
            <el-form
                v-if="addDialogVisible"
                :model="addForm"
                :rules="addFormRules"
                ref="addFormRef"
                label-width="100px"
            >
                <el-form-item
                    label="班级名称"
                    prop="className"
                >
                    <el-input v-model="addForm.className"/>
                </el-form-item>
                <el-form-item
                    label="班级届数"
                    prop="classNumber"
                >
                    <el-date-picker
                        v-model="addForm.classNumber"
                        type="year"
                        placeholder="选择年"
                        value-format="yyyy"
                    />
                </el-form-item>
                <el-form-item
                    label="绑定专业"
                    prop="proId"
                >
                    <el-select
                        v-model="addForm.proId"
                        filterable
                        placeholder="试试搜索吧~">
                        <el-option-group
                            v-for="group in options"
                            :key="group.professionalTypeName"
                            :label="group.professionalTypeName">
                            <el-option
                                v-for="item in group.professions"
                                :key="item.proName"
                                :label="item.proName"
                                :value="item.proId">
                            </el-option>
                        </el-option-group>
                    </el-select>

                </el-form-item>
            </el-form>
            <!--      对话框底部区域-->
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="addclasses"
        >添加班级</el-button>
      </span>
        </el-dialog>
        <!--    修改班级名称对话框-->
        <el-dialog
            title="修改名称"
            :visible.sync="editDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >
            <!--      对话框主体区域-->
            <el-form
                v-if="editDialogVisible"
                :model="editForm"
                :rules="editFormRules"
                ref="editFormRef"
                label-width="100px"
            >
                <el-form-item
                    label="新班级名称"
                    prop="className"
                >
                    <el-input v-model="editForm.className"/>
                </el-form-item>
                <el-form-item
                    label="班级届数"
                    prop="classNumber"
                >
                    <el-date-picker
                        v-model="editForm.classNumber"
                        type="year"
                        placeholder="选择年"
                        value-format="yyyy"
                    />
                </el-form-item>
                <el-form-item
                    label="绑定专业"
                    prop="proId"
                >
                    <el-select
                        v-model="editForm.proId"
                        filterable
                        placeholder="试试搜索吧~">
                        <el-option-group
                            v-for="group in options"
                            :key="group.professionalTypeName"
                            :label="group.professionalTypeName">
                            <el-option
                                v-for="item in group.professions"
                                :key="item.proName"
                                :label="item.proName"
                                :value="item.proId">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
            </el-form>
            <!--      对话框底部区域-->
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="editclasses"
        >修改名称</el-button>
      </span>
        </el-dialog>
        <!--    删除班级对话框-->
        <el-dialog
            title="删除班级"
            :visible.sync="deleteDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >
            <!--      对话框主体区域-->
            <span>确认删除吗?</span>
            <!--      对话框底部区域-->
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="deleteclasses"
        >删除班级</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'ClassesManage',
        data () {
            return {
                // 联动菜单数据
                cascaderOptions: [],
                /** 数据表格 */
                // 数据表格数据绑定
                page: {
                    current: 1,
                    limit: 5,
                    total: 0
                },
                className: '',
                // 数据表格数据
                tableData: [],
                isDisable:false,
                // 总共多少条数据
                total: 0,
                user: JSON.parse(window.sessionStorage.getItem('user')),
                tableHeader: [
                    { label: '班级编号', prop: 'classId', width: 100 },
                    { label: '班级届数', prop: 'classNumber' },
                    { label: '班级名称', prop: 'className' },
                    { label: '所属专业', prop: 'proName' },
                    { label: '班级人数', prop: 'peopleNum' },
                    { label: '创建时间', prop: 'createTime' }
                ],
                /** 控制添加班级对话框的显示与隐藏 */
                addDialogVisible: false,
                /** 新增班级表单数据 */
                addForm: {
                    className: '',
                    classNumber: '',
                    proId: ''
                },
                /** 表单验证相关配置 */
                addFormRules: {
                    className: [
                        { required: true, message: '请输入班级名称', trigger: 'blur' },
                        { min: 4, max: 21, message: '长度在 4 到 21 个字符', trigger: 'blur' }
                    ],
                    classNumber: [
                        { required: true, message: '请输入班级届数', trigger: 'blur' }],
                    proId: [
                        { required: true, message: '请选择绑定专业', trigger: 'blur' }
                    ]
                },
                /** 控制修改班级对话框的显示与隐藏 */
                editDialogVisible: false,
                /** 控制删除班级对话框的显示与隐藏 */
                deleteDialogVisible: false,
                /** 修改班级表单数据 */
                editForm: {
                    classId: '',
                    classNumber: '',
                    className: '',
                    proId: '',
                },
                /** 表单验证相关配置 */
                editFormRules: {
                    className: [
                        { required: true, message: '请输入班级名称', trigger: 'blur' },
                        { min: 4, max: 21, message: '长度在 4 到 21 个字符', trigger: 'blur' }
                    ],
                    classNumber: [
                        { required: true, message: '请输入班级届数', trigger: 'blur' }],
                    proId: [
                        { required: true, message: '请选择绑定专业', trigger: 'blur' }
                    ]
                },
                professionalType: {
                    value: '',
                    label: '',
                    children: []
                },
                options: [],
                deleteId:''
            }
        },
        /** 生命周期函数 */
        created () {
            let user = this.user;
            if (user.type == "2"){
                this.isDisable = true;
            }
            // 这里是发起表格数据请求的位置

            const className = this.$route.query.className
            if (className !== undefined && className !== '') {
                this.className = className
            }
            this.getclassesData()
            this.getProfessionDataCascaderOptions()
        },
        /** 事件处理函数 */
        methods: {
            /** 修复当用户在大于1的分页进行数据搜索没有返回值的问题 */
            setPageNum () {
                this.page.current = 1
                this.getclassesData()
            },
            /** 获取专业数据 */
            getProfessionDataCascaderOptions () {
                let self = this
                self.utils.sendReq({
                    queryUrl: 'professionalType/queryAll',
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.options = req.data.data;
                            }
                        }
                    }
                })

            },
            /** 添加班级操作 */
            addclasses () {
                let self = this
                let className = self.addForm.className
                let classNumber = self.addForm.classNumber
                let proId = self.addForm.proId;
                self.$refs.addFormRef.validate(valid => {
                    if (valid) {
                        self.utils.sendReq({
                            queryUrl: '/classRoom/add',
                            req: {
                                method: 'post',
                                data: {
                                    'className': className,
                                    'classNumber': classNumber,
                                    'proId': proId
                                },
                                success: function (req) {
                                    if (req.data.code === 200) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'success',
                                            showClose: true,
                                            center: true
                                        })
                                        self.getclassesData()
                                        self.addDialogVisible = false
                                    }
                                    if (req.data.code === 400) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'error',
                                            showClose: true,
                                            center: true
                                        })
                                    }
                                },
                                error: function () {
                                    self.$message({
                                        message: '接口请求失败！',
                                        type: 'error',
                                        showClose: true,
                                        center: true
                                    })
                                }
                            }
                        })
                    }
                })
            },
            /** 修改班级操作 */
            editDialogVisible1 (row) {
                this.editForm.classId = row.classId
                this.editForm.className = row.className
                this.editForm.classNumber = row.classNumber
                this.editForm.proId = row.proId
                this.editDialogVisible = true
            },
            editclasses () {
                let self = this
                let data = {}
                data.classId = self.editForm.classId
                data.className = self.editForm.className
                data.classNumber = self.editForm.classNumber
                data.proId = self.editForm.proId;
                self.$refs.editFormRef.validate(valid => {
                    if (valid) {
                        this.utils.sendReq({
                            queryUrl: 'classRoom/update',
                            req: {
                                data: data,
                                method: 'post',
                                success: function (req) {
                                    if (req.data.code === 200) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'success',
                                            showClose: true,
                                            center: true
                                        })
                                        self.getclassesData()
                                        self.editDialogVisible = false
                                    }
                                    if (req.data.code === 400) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'error',
                                            showClose: true,
                                            center: true
                                        })
                                    }
                                },
                                error: function () {
                                    self.$message({
                                        message: '接口请求失败！',
                                        type: 'error',
                                        showClose: true,
                                        center: true
                                    })
                                }
                            }
                        })
                    }
                })
            },
            /** 删除班级操作 */
            deleteDialogVisible1 (classId) {
                this.deleteId = classId
                this.deleteDialogVisible = true
            },
            deleteclasses () {
                let self = this
                let classId = self.deleteId;
                this.utils.sendReq({
                    queryUrl: `classRoom/delete/${classId}`,
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.$message({
                                    message: req.data.msg,
                                    type: 'success',
                                    showClose: true,
                                    center: true
                                })
                                self.deleteDialogVisible = false
                                self.getclassesData();
                            }
                            if (req.data.code === 400) {
                                self.$message({
                                    message: req.data.msg,
                                    type: 'error',
                                    showClose: true,
                                    center: true
                                })
                                self.deleteDialogVisible = false
                            }
                        },
                        error: function () {
                            self.$message({
                                message: '接口请求失败！',
                                type: 'error',
                                showClose: true,
                                center: true
                            })
                            self.deleteDialogVisible = false
                        }
                    }
                })
            },
            /** 获取班级管理页面的班级列表数据 */
            getclassesData () {
                let self = this
                let className = self.className
                let current = self.page.current
                let limit = self.page.limit
                let classRoomVos = []
                self.utils.sendReq({
                    queryUrl: '/classRoom/query?current=' + current + '&limit=' + limit + '&className=' + className,
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.page.total = req.data.data.page.rows
                                for (let i in req.data.data.ClassRoomVos) {
                                    classRoomVos.push(req.data.data.ClassRoomVos[i])
                                }
                                self.tableData = classRoomVos
                            }
                        }
                    }
                })
            },
            /** 监听每页显示多少数据的改变 */
            handleSizeChange (newSize) {
                this.page.limit = newSize
                this.getclassesData()
            },
            /** 监听页码的改变 */
            handleCurrentChange (newPage) {
                this.page.current = newPage
                this.getclassesData()
            },

            /** 跳转到学生数据页面并显示本班级的学生 */
            toStudentDataShowClasses (className) {
                this.$router.push({
                    path: '/admin/studentData',
                    query: {
                        className: className
                    }
                })
            },
            rowStyle(row, rowIndex){
                return 'height : 35px'
            },
            cellStyle(){
                return 'padding : 2px';
            }
        }
    }
</script>

<style lang="less" scoped>
    .input-select {
        width: 130px;
    }

    .el-table {
        align-items: center;
        margin-top: 25px;
    }

    .el-pagination {
        margin-top: 25px;
    }
</style>
